<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>电影之家</title>
    {% load static %}
    <link rel="shortcut icon" href="{% static '/images/bitbug_favicon.ico' %}">
	<link rel="stylesheet" href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static 'lib/font-awesome-4.7.0/css/font-awesome.min.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
    <script src="{% static 'lib/jquery/jquery-3.4.1.min.js' %}" type="text/javascript"></script>
	<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}" type="text/javascript"></script>
    <link rel="stylesheet" href="{% static 'css/index.css' %}" type="text/css">
    <script src="{% static 'js/index_ajax.js' %}" type="text/javascript"></script>
</head>
<body>
	<!-- 头部 -->
	<header class="movie_header">
		<div class="container">
			<div class="row">
				<div class="col-md-2 movieLogo">
					<a href="#">
						<span>电影之家</span>
					</a>
				</div>
				<div class="col-md-8 searchBar visible-lg">
					<input type="text" name="search" id="search"><button class="btn" id="search_btn">搜索</button>
				</div>
				<div class="col-md-2 visible-lg registerAndLogin">
                    <div class="personal">
                    {% if request.user.is_authenticated %}
                        <dl class="user">
							<dd class="fr" id="userTop">{{ user.username }}
								<img src="{% static 'images/icon/top_down.png' %}">
							</dd>
							<dt><img src="{{ MEDIA_URL }}{{ request.user.image }}" width="25" height="25"></dt>
						</dl>
						<div class="userdetail">
							<dl>
								<dt><img src="{{ MEDIA_URL }}{{ request.user.image }}" width="80" height="80"></dt>
								<dd>
									<h2>{{ request.user.nick_name }}</h2>
									<span>{{ request.user.username|default_if_none:'root' }}</span>
								</dd>
							</dl>
							<div class="btn">
								<a class="personcenter fl" href="{% url 'users:user_info' %}">进入个人中心</a>
                                <a class="fr" href="{% url 'logout' %}">退出</a>
							</div>
						</div>
                    {% else %}
{#                      <a href="{% url 'register' %}" class="register_btn"></a>#}
                        <a href="#register" data-toggle="tab" >
                            <div class="btn btn-link register" data-toggle="modal" data-target="#myModal" id="user_register">注册</div>
                        </a>
                        <a href="#login" data-toggle="tab">
                            <div class="btn btn-link register" data-toggle="modal" data-target="#myModal">登录</div>
                        </a>
                    {% endif %}
                    </div>
				</div>
			</div>
		</div>
	</header>
	<!-- 轮播图 -->
	<div class="movie_banner">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
			<!-- 点标签 -->			
			<ol class="carousel-indicators">
                {% for banner_count in all_banners %}
				    <li data-target="#carousel-example-generic" data-slide-to="0" class="{% if forloop.counter == 1 %}active{% endif %}"></li>
				{% endfor %}
			</ol>
			<!-- 轮播内容 -->
			<div class="carousel-inner " role="listbox">
                {% for banner in all_banners %}
				<div class="item {% if forloop.counter == 1 %}active{% endif %}">
					<img src="{{ MEDIA_URL }}{{ banner.image }}">
				</div>
                {% endfor %}
			</div>
			<!-- 控制器 -->
			<a href="#carousel-example-generic" role="button" data-slide="prev" class="left carousel-control">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a href="#carousel-example-generic" role="button" data-slide="next" class="right carousel-control">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
	<!-- 视频分类导航条 -->
	<nav class="movie_nav ">
		<div class="container">
			<div class="classify">
				<span>类型:</span>
                <a href="?language={{ movie_language }}&region={{ movie_region }}" class="{% ifequal movie_type '' %}active2{% endifequal %}">全部</a>
{#				{% for type in movie_page.object_list %}#}
{#                    <a href="?type={{ type.movie_type }}&language={{ movie_language }}&region={{ movie_region }}" class="{% ifequal movie_type type.movie_type  %}active2{% endifequal %}">{{ type.movie_type }}</a>#}
{#                {% endfor %}#}
                {% for key,value in type_dic.items %}
                    <a href="?type={{ key }}&language={{ movie_language }}&region={{ movie_region }}" class="{% ifequal movie_type key  %}active2{% endifequal %}">{{ value }}</a>
                {% endfor %}
			</div>
			<div class="particularYear">
			    <span>语言:</span>
                <a href="?type={{ movie_type }}&region={{ movie_region }}" class="{% ifequal movie_type '' %}active2{% endifequal %}">全部</a>
{#				{% for language in movie_page.object_list %}#}
{#                    <a href="?type={{ movie_type }}&language={{ language.language }}&region={{ movie_region }}" class="{% ifequal movie_language language.language %}active2{% endifequal %}">{{ language.language }}</a>#}
{#                {% endfor %}#}
                {% for key,value in language_dic.items %}
                    <a href="?type={{ movie_type }}&language={{ key }}&region={{ movie_region }}" class="{% ifequal movie_language key %}active2{% endifequal %}">{{ value }}</a>
                {% endfor %}
			</div>
			<div class="region">
			    <span>地区:</span>
                <a href="?type={{ movie_type }}&language={{ movie_language }}" class="{% ifequal movie_type '' %}active2{% endifequal %}">全部</a>
{#				{% for region in movie_page.object_list %}#}
{#                    <a href="?type={{ movie_type }}&language={{ movie_language }}&region={{ region.region }}" class="{% ifequal movie_region region.region %}active2{% endifequal %}">{{ region.region }}</a>#}
{#                {% endfor %}#}
                {% for key,value in region_dic.items %}
                    <a href="?type={{ movie_type }}&language={{ movie_language }}&region={{ key }}" class="{% ifequal movie_region key %}active2{% endifequal %}">{{ value }}</a>
                {% endfor %}
			</div>
		</div>
	</nav>
	<!-- 内容 -->
	<div class="movie_content ">
		<div class="content container">
			<div class="row">
				<div class="col-md-10">
                    {% for movie in movie_page.object_list %}
					<div class="movie">
						<a href="{% url 'movieinfo:movie_detail' movie.id %}">
							<img src="{{ MEDIA_URL }}{{ movie.image }}">
							<span>{{ movie.name }}</span>
						</a>
					</div>
                    {% endfor %}

                    <!--分页-->
					<ul class="pager" style="clear:both">
                        {% if movie_page.has_previous %}
						<li class="long"><a href="?{{ movie_page.previous_page_number.querystring }}">上一页</a></li>
                        {% endif %}

                        {% for page in movie_page.pages %}
                            {% if page %}
                                {% ifequal page movie_page.number %}
                                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                {% else %}
                                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                {% endifequal %}
                            {% else %}
                                    <li class="none">
                                        <a href="">...</a>
                                    </li>
                                {% endif %}
                        {% endfor %}

                        {% if movie_page.has_next %}
						    <li class="long"><a href="?{{ movie_page.next_page_number.querystring }}">下一页</a></li>
                        {% endif %}
					</ul>
				</div>
                <!--排行榜-->
				<div class="col-md-2 visible-lg">
					<div>
						<span><i class="fa fa-trophy" aria-hidden="true"></i></span>
						<span>排行榜</span>
					</div>
                    {% for click in click_nums %}
					    <div>{{ forloop.counter }}.<a href="{% url 'movieinfo:movie_detail' click.id %}">{{ click.name }}</a></div>
                    {% endfor %}
				</div>
			</div>
		</div>	
	</div>
	
	<!-- 底部 -->
	<footer class="movie_footer">
	</footer>

	<!-- 模态窗口 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
	    <div class="modal-dialog">
	        <div class="modal-content tab-content">
	        	<!-- 注册 -->
				<div class="tab-pane" id="register">
	            	<div class="modal-header">
	            	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	            	    <h4 class="modal-title" id="myModalLabel">邮箱注册</h4>
	            	</div>
	            	<div class="modal-body">
	            		<form  autocomplete="off" id="email_register_form" method="post">
	            			<ul>
	            				<li class="{% if login_form.errors.email %}errorput{% endif %}">
	            					<label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
	            					<input type="text" id="id_email" name="email" placeholder="请输入您的邮箱地址" value="{{ register_form.email.value |default_if_none:''}}">
	            				</li>
	            				<li class="{% if login_form.errors.password %}errorput{% endif %}">
	            					<label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
	            					<input type="password" id="id_password" name="password" placeholder="请输入6-20位非中文字符" value="{{ register_form.password.value|default_if_none:'' }}">
	            				</li>            				
	            				<li class="{% if login_form.errors.captchal %}errorput{% endif %} captcha1">
	            					<label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
                                    {{ register_form.captcha }}
	            				</li>
	            				<div class="error btns" id="jsEmailTips">
{#                                    {{ register_form.captcha.error }}#}
{#                                    {{ register_form.errors }}#}
{#                                    {{ register_form.msg }}#}
                                </div>
	            				<li>
									<input type="submit" id="jsEmailRegBtn" class="btn" value="注册并登录">
	            				</li>
	            			</ul>
                            {% csrf_token %}
	            		</form>            					
	            	</div>            		         
				</div>
				<!-- 登录 -->
				<div class="tab-pane" id="login">
	            	<div class="modal-header">
	            	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	            	    <h4 class="modal-title" id="myModalLabel">账号登录</h4>
	            	</div>
	            	<div class="modal-body">
	            		<form  id="jsLoginForm" autocomplete="off" method="post">
	            			<ul>
	            				<li class="{% if login_form.errors.username %}errorput{% endif %}">
									<label>用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
									<input type="text" name="username" placeholder="请输入邮箱" id="account_l">
	            				</li>
	            				<li class="pwd {% if login_form.errors.username %}errorput{% endif %}">
									<label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
									<input type="password" name="password" id="password_l" placeholder="请输入您的密码">
	            				</li>
                                <div class="error btns login-form-tips" id="jsLoginTips"></div>
	            				 <div class="forgetPwd">
	            				 	<a href="#forget" class="fr" data-toggle="tab" id="forgetBtn" onclick="f1(this)">
                                         <span>忘记密码?</span>
                                     </a>
	            				 </div>
	            				 <li>
	            				 	<input type="submit" class="btn" id="jsLoginBtn" value="登录">
	            				 </li>
	            			</ul>
                            {% csrf_token %}
	            		</form>
	            	</div>	           	
				</div>
                <!-- 忘记密码 -->
                <div class="tab-pane" id="forget" height="500">
	            	<div class="modal-header">
	            	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	            	    <h4 class="modal-title" id="myModalLabel">忘记密码</h4>
	            	</div>
	            	<div class="modal-body">
	            		<form action="/forget/" method="post" autocomplete="off">
	            			<ul>
	            				<li class="{% if forget_from.errors.email %}errorput{% endif %}">
									<label>帐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
									<input type="text" name="email" placeholder="邮箱" id="account" value="{{ forget_from.email.value }}">
	            				</li>
                                <li class="{% if forget_from.errors.captchal %}errorput{% endif %}">
	            					<label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
                                    {{ forget_form.captcha }}
	            				</li>
                                <div class="error btns login-form-tips" id="jsLoginTips">
                                    {% for key,error in forget_form.errors.items %}
                                        {{ error }}
                                    {% endfor %}
                                    {{ msg }}
                                </div>
	            				<li>
	            					<input type="submit" class="btn" id="jsFindPwdBtn" value="提交">
	            				</li>
	            			</ul>
                            {% csrf_token %}
	            		</form>
	            	</div>
				</div>
	        </div>
	    </div>
	</div>
	<!-- 回到顶部(锚点) -->
	<div class="gotop">
		<ul>
			<li>
				<a href="#" id="goToBtn">
					<i class="fa fa-chevron-circle-up" aria-hidden="true"></i>
				</a>
			</li>
			<li>
				<a href="#" class="user" target="_blank">
					<i class="fa fa-user" aria-hidden="true"></i>
				</a>
			</li>
		</ul>
	</div>
</body>
<script>
    var index=1051;
    function f1(obj){
        var k=obj.getAttribute("data-target");
        $(k).css('z-index',index);
        index++;
    }

</script>
</html>